<template>
    <div>
        <!-- 搜索框 -->
        <form action="/">
            <van-search
                v-model="searchText"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch(searchText)"
                @cancel="$router.back()"
                @focus="isResultShow = false"
            />
        </form>

        <!-- 搜索结果 -->
        <search-result
            v-if="isResultShow"
            :search-text="searchText"
        ></search-result>

        <!-- 联想建议 -->
        <search-suggestion
            v-else-if="searchText"
            :search-text="searchText"
            @search="onSearch"
        ></search-suggestion>

        <!-- 搜索历史 -->
        <search-history
            v-else
            :search-history="userSearchHistory"
            @search="onSearch"
            @ondeleteall="onDeleteAll"
        ></search-history>
    </div>
</template>

<script>
import SearchSuggestion from './components/search-suggestion'
import SearchHistory from './components/search-history'
import SearchResult from './components/search-result'
import { getItem, setItem } from '@/utils/storage'
import { mapState } from 'vuex'
// import { getSearchHistory, deleteSearchHistory } from '@/api/search'

export default {
    data () {
        return {
            // 搜索内容
            searchText: '',
            // 控制搜索结果的显示状态
            isResultShow: false,
            // 用户搜索历史
            userSearchHistory: []
        }
    },
    components: {
        SearchSuggestion,
        SearchHistory,
        SearchResult
    },
    created () {
        this.loadSearchHistorys()
    },
    methods: {
        onSearch (searchText) {
            // 把输入框设置为要搜索的文本
            this.searchText = searchText

            const index = this.userSearchHistory.indexOf(searchText)
            if (index !== -1) {
                // 删除重复项
                this.userSearchHistory.splice(index, 1)
            }
            // 把最新的搜索记录放到最前面
            this.userSearchHistory.unshift(searchText)
            // 把搜索记录保存到本地
            setItem('search-historys', this.userSearchHistory)

            // 展示搜索结果
            this.isResultShow = true
        },
        // 加载搜索历史
        async loadSearchHistorys () {
            const searchHistorys = getItem('search-historys') || []

            // let searchHistorys = getItem('search-historys') || []
            // if (this.user) {
            //     const { data: res } = await getSearchHistory()
            //     // console.log(res);

            //     // 让获取到的历史记录和本地存储的历史记录合并到一起
            //     searchHistorys = [...new Set([...searchHistorys, ...res.data.keywords])]
            // }
            this.userSearchHistory = searchHistorys
        },
        // 删除全部的历史记录
        async onDeleteAll () {
            // await deleteSearchHistory()
            // console.log(res);

            // const { data } = await getSearchHistory()
            // this.userSearchHistory = data.data.keywords
            // console.log(this.userSearchHistory);

            this.userSearchHistory = []
        }
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {
        // 监视搜索历史记录的变化，存储到本地存储
        userSearchHistory () {
            setItem('search-historys', this.userSearchHistory)
        }
    }
}
</script>

<style scoped>
</style>
